{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import sub_nav with context %}
{% from "macros-protocol.html" import callout, callout_compact %}

{% extends "firefox/base/base-protocol.html" %}

{# product_name is the product and channel together. Example: Firefox for Android Beta. #}
{# product_name may be over-ridden with more appropriate content to avoid bad names like: Firefox Release Release #}
{% set product_name = product_name|default(release.product + ' ' + release.channel) %}

{# brand_product is appended to the class `mzp-t-product-` to set the product logo (release, beta, nightly, etc) #}
{% set brand_product = brand_product|default('firefox') %}

{# header_class is applied to the page header as an additional style hook if needed #}
{% set header_class = header_class|default('') %}

{# We want to denote www.firefox.com as the canonical source of release notes #}
{% block canonical_urls %}
    {{ firefox_com_canonical_tag() }}
{% endblock %}

{# theme_class is applied to the body as an additional style hook if needed #}
{% set theme_class = '' %}
{% set ver = release.major_version_int %}
{% if release.product != 'Firefox for iOS' %}
  {% if (ver < 70) and (ver > 57) %}
    {% set theme_class = 't-quantum' %}
  {% elif ver <= 57 %}
    {% set theme_class = 't-pre-quantum' %}
  {% endif %}
{% elif release.product == 'Firefox for iOS' %}
  {% if (ver < 20) and (ver > 10) %}
    {% set theme_class = 't-quantum' %}
  {% elif ver < 10 %}
    {% set theme_class = 't-pre-quantum' %}
  {% endif %}
{% endif %}

{% block page_title_prefix %}{% endblock %}
{% block page_title %}{{ release.product }} {{ channel_name }} {{ release.version }}, See All New Features, Updates and Fixes{% endblock %}
{% block page_title_suffix %}{% endblock %}

{% block body_id %}notes{% endblock %}
{% block body_class %}mzp-t-firefox {{ theme_class }}{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-callout') }}
  {{ css_bundle('protocol-article') }}
  {{ css_bundle('firefox_releasenotes') }}

  {% if switch('release-notes-newsletter-banner', ['en']) %}
    {{ css_bundle('firefox-newsletter-banner') }}
  {% endif %}
{% endblock %}

{% set channel_name = '' if release.channel == 'Release' else release.channel %}

{% set download_title = download_title|default('Get the most recent version') %}

{% block sub_navigation %}
  {{ sub_nav(
    title={
      'text':  ftl('sub-navigation-release-notes')
    },
    links=[
    {
      'text': ftl('sub-navigation-desktop'),
      'href': equivalent_release_url if release.channel == 'Release' and release.product == 'Firefox for Android' and equivalent_release_url else url('firefox.notes'),
      'cta_name': "Desktop"
    },
    {
      'text': ftl('sub-navigation-desktop-beta-and-developer'),
      'href': url('firefox.notes', channel='beta'),
      'cta_name': "Desktop Beta and Developer Edition"
    },
    {
      'text': ftl('sub-navigation-desktop-nightly'),
      'href': url('firefox.notes', channel='nightly'),
      'cta_name': "Desktop Nightly"
    },
    {
      'text': ftl('sub-navigation-android'),
      'href': equivalent_release_url if release.channel == 'Release' and release.product == 'Firefox' and equivalent_release_url else url('firefox.notes', platform='android'),
      'cta_name': "Android"
    },
    {
      'text': ftl('sub-navigation-ios'),
      'href': url('firefox.notes', platform='ios'),
      'cta_name': "iOS"
    }]
  ) }}
{% endblock %}

{% set feedback_url='https://connect.mozilla.org/' %}
{% set bugzilla_url='https://bugzilla.mozilla.org/enter_bug.cgi' %}
{% block content %}
<main>
  <article id="main-content">

    {% block notes_header %}
    <header class="notes-head">
      <div class="intro">
        <div class="container">
          {% if not primary_heading %}
            {% if product_name == 'Firefox Beta' %}
              {% set primary_heading = 'Firefox Beta and Developer Edition <br> Release Notes'|safe %}
            {% else %}
              {% set primary_heading = '{0} <br> Release Notes'|f(product_name)|safe %}
            {% endif %}
          {% endif %}
          {% set call_out_desc = 'Release Notes tell you what’s new in Firefox. As always, we welcome your <a href="%(feedback)s">feedback</a>. You can also <a href="%(bugzilla)s">file a bug in Bugzilla</a> or see the <a href="%(check)s">system requirements</a> of this release.'|format(feedback=feedback_url, bugzilla=bugzilla_url, check=check_url) %}
          {% call callout(
            heading_level=1,
            title=primary_heading,
            desc=call_out_desc|safe,
            class='mzp-t-firefox mzp-t-background-tertiary ' + header_class,
            include_cta=True,
            brand=True,
            brand_product=brand_product,
            brand_type='logo',
            brand_size='lg',
          ) %}
            {% if download_button_primary %}
              <div class="c-download-cta">
              {% block top_download_buttons %}
                {{ download_button_primary }}
              {% endblock %}
              </div>
            {% endif %}
          {% endcall %}
      </div>

      {% if release.version %}
      {% block notes_heading_secondary %}
      <div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-left">
        <div class="mzp-l-sidebar">
          <h2 class="c-release-summary">
            <span class="c-release-version">{{ release.version }}</span>
            <span class="c-release-product">{{ release.product }} {{ release.channel }}</span>
          </h2>
          {% if release.is_public %}
            <p class="c-release-date">{{ release.release_date|l10n_format_date }}</p>
          {% endif %}
        </div>
        <div class="mzp-l-main mzp-l-article">
          {% if release.is_public %}
            <div class="c-release-first-title">Version {{ release.version }}, first offered to {{ release.channel }} channel users on {{ release.release_date|l10n_format_date }}</div>
            <div class="c-release-first-text">{{ release.text|safe }}</div>
          {% else %}
            <h2 class="c-release-draft-title">We’re still preparing the notes for this release, and will post them here when they are ready. Please check back later.</h2>
            {% block extra_draft_description %}{% endblock %}
          {% endif %}
        </div>
      </div>
      {% endblock %}
      {% endif %}
    </header>
  {% endblock %}

    <section class="c-release-notes">
    {% if release.is_public and release_notes %}
      {% for note in release_notes if note.tag == "New" %}
        {% if loop.first %}
          <div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-left" id="{{ note.tag|lower() }}">
            <div class="mzp-l-sidebar">
              <img class="sidebar-icon" alt="" src="{{ static('protocol/img/icons/highlight.svg') }}" width="30" height="30">
              <h3>{{ note.tag }}</h3>
            </div>
            <div class="mzp-l-main mzp-l-article">
              <ul>
        {% endif %}
        {{ note_entry(note) }}
        {% if loop.last %}
              </ul>
            </div>
          </div>
        {% endif %}
      {% endfor %}

      {% for note in release_notes if note.tag == "Fixed" %}
        {% if loop.first %}
          <div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-left" id="{{ note.tag|lower() }}">
            <div class="mzp-l-sidebar">
              <img class="sidebar-icon" alt="" src="{{ static('protocol/img/icons/check.svg') }}" width="30" height="30">
              <h3>{{ note.tag }}</h3>
            </div>
            <div class="mzp-l-main mzp-l-article">
              <ul>
        {% endif %}
        {{ note_entry(note) }}
        {% if loop.last %}
              </ul>
            </div>
          </div>
        {% endif %}
      {% endfor %}

      {% for note in release_notes if note.tag == "Changed" %}
        {% if loop.first %}
          <div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-left" id="{{ note.tag|lower() }}">
            <div class="mzp-l-sidebar">
              <img class="sidebar-icon" alt="" src="{{ static('protocol/img/icons/features.svg') }}" width="30" height="30">
              <h3>{{ note.tag }}</h3>
            </div>
            <div class="mzp-l-main mzp-l-article">
              <ul>
        {% endif %}
          {{ note_entry(note) }}
        {% if loop.last %}
              </ul>
            </div>
          </div>
        {% endif %}
      {% endfor %}

      {% for note in release_notes if note.tag == "Enterprise" %}
        {% if loop.first %}
          <div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-left" id="{{ note.tag|lower() }}">
            <div class="mzp-l-sidebar">
              <img class="sidebar-icon" alt="" src="{{ static('protocol/img/icons/enterprise.svg') }}" width="30" height="30">
              <h3>{{ note.tag }}</h3>
            </div>
            <div class="mzp-l-main mzp-l-article">
              <ul>
        {% endif %}
        {{ note_entry(note) }}
        {% if loop.last %}
              </ul>
            </div>
          </div>
        {% endif %}
      {% endfor %}

      {# The Developer section is always visible with a MDN link except for dot releases #}
      {% set dot_release = release.channel == 'Release' and release.version_obj|string != release.major_version + '.0' -%}
      {% set devtools_notes = release_notes|selectattr('tag', 'equalto', 'Developer')|list|length > 1 %}

      {% for note in release_notes if note.tag == "Developer" %}
        {% if dot_release and not devtools_notes %}
          {% continue %}
        {% endif %}
        {% if loop.first %}
          <div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-left" id="{{ note.tag|lower() }}">
            <div class="mzp-l-sidebar">
              <img class="sidebar-icon" alt="" src="{{ static('protocol/img/icons/developer.svg') }}" width="30" height="30">
              <h3>Developer</h3>
            </div>
            <div class="mzp-l-main mzp-l-article">
              <ul>
        {% endif %}
        {{ note_entry(note) }}
        {% if loop.last %}
              </ul>
            </div>
          </div>
        {% endif %}
      {% endfor %}

      {% for note in release_notes if note.tag == "HTML5" %}
        {% if loop.first %}
          <div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-left" id="{{ note.tag|lower() }}">
            <div class="mzp-l-sidebar">
              <img class="sidebar-icon" alt="" src="{{ static('protocol/img/icons/globe.svg') }}" width="30" height="30">
              <h3>Web Platform</h3>
            </div>
            <div class="mzp-l-main mzp-l-article">
              <ul>
        {% endif %}
        {{ note_entry(note) }}
        {% if loop.last %}
              </ul>
            </div>
          </div>
        {% endif %}
      {% endfor %}

      {% for note in release_notes if note.tag == "Resolved" %}
        {% if loop.first %}
          <div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-left" id="{{ note.tag|lower() }}">
            <div class="mzp-l-sidebar">
              <img class="sidebar-icon" alt="" src="{{ static('protocol/img/icons/check.svg') }}" width="30" height="30">
              <h3>{{ note.tag }}</h3>
            </div>
            <div class="mzp-l-main mzp-l-article">
              <ul>
        {% endif %}
        {{ note_entry(note) }}
        {% if loop.last %}
              </ul>
            </div>
          </div>
        {% endif %}
      {% endfor %}

      {% for note in release_notes if not note.tag %}
        {% if loop.first %}
          <div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-right">
            <div class="mzp-l-main mzp-l-article">
              <ul class="untagged">
        {% endif %}
        {{ note_entry(note) }}
        {% if loop.last %}
              </ul>
            </div>
          </div>
        {% endif %}
      {% endfor %}

      {% for note in release_notes if note.tag == "Known" %}
        {% if loop.first %}
          <div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-left" id="{{ note.tag|lower() }}">
            <div class="mzp-l-sidebar">
              <img class="sidebar-icon" alt="" src="{{ static('protocol/img/icons/stop.svg') }}" width="30" height="30">
              <h3>Unresolved</h3>
            </div>
            <div class="mzp-l-main mzp-l-article">
              <ul>
        {% endif %}
        {{ note_entry(note) }}
        {% if loop.last %}
              </ul>
            </div>
          </div>
        {% endif %}
      {% endfor %}

      {% for note in release_notes if note.tag == "Community" %}
        {% if loop.first %}
          <div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-left" id="{{ note.tag|lower() }}">
            <div class="mzp-l-sidebar">
              <img class="sidebar-icon" alt="" src="{{ static('img/firefox/releasenotes/community.svg') }}" width="30" height="30">
              <h3>Community Contributions</h3>
            </div>
            <div class="mzp-l-main mzp-l-article">
              <ul>
        {% endif %}
        {{ note_entry(note) }}
        {% if loop.last %}
              </ul>
            </div>
          </div>
        {% endif %}
      {% endfor %}
    {% endif %}
    </section>

    {% call callout_compact(
      title=download_title,
      class='mzp-t-firefox mzp-t-background-secondary ' + header_class,
      brand=True,
      brand_product=brand_product,
      brand_type='logo',
      brand_size='lg'
    ) %}
      {{ download_button_secondary }}
    {% endcall %}

    {% if download_all_link %}
    <section class="all-download">
      <a href="{{ download_all_link }}">All {{ product_name }} downloads</a>
    </section>
    {% endif %}

    {% block releasenotes_footer %}
    <footer class="c-release-footer">
      <div class="mzp-l-content">
        <div class="c-release-footer-col">
          <h2>Need help or want to leave feedback?</h2>
          <a rel="external" href="{{ bugzilla_url }}">File a bug</a>
          <a rel="external" href="{{ feedback_url }}">Leave feedback</a>
        </div>
        <div class="c-release-footer-col">
          <h2>Get Involved</h2>
          <p>Did you know that most of the content in Firefox Support was written by volunteers?</p>
          <a rel="external" href="https://support.mozilla.org/get-involved">Find out more</a>
        </div>
        <div class="c-release-footer-col">
          <h2>Other Resources</h2>
          {% block extra_resources %}{% endblock %}
          <a rel="external" href="https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/{{ release.major_version }}">Developer Information</a>
          <a rel="external"  href="{{ release.get_bug_search_url() }}">Complete list of changes for this release</a>
          <a rel="external" href="https://blog.mozilla.org/press/kits/">Press Kit</a>
          <a rel="external" href="https://blog.mozilla.org/press/">Mozilla and Firefox News</a>
          <a href="{{ url('firefox.enterprise.index') }}">Firefox Extended Support Release</a>
          <a href="{{ url('firefox.releases.index') }}">All Firefox for Desktop Releases</a>
          <a href="{{ url('firefox.more') }}">Learn more about Firefox</a>
        </div>
      </div>
    </footer>
    {% endblock %}
</article>
</main>

{% if switch('release-notes-newsletter-banner', ['en']) %}
  {# Give newsletter landmark a separate aria identifier to the pencil banner: https://github.com/mozilla/bedrock/issues/15958 #}
  {% with aria_label = 'Newsletter' %}
    {% include 'includes/banners/firefox-newsletter.html' %}
  {% endwith %}
{% endif %}

{% endblock %}

{% block email_form %}{% endblock %}

{% macro note_entry(note) %}
  <li class="release-note" id="note-{{ note.id }}">
    <div class="release-note-content">
      {{ note.note|safe }}
      {% if release.channel == 'Nightly' and note.bug -%}
      <span class="bug-id"><a href="https://bugzilla.mozilla.org/show_bug.cgi?id={{ note.bug }}">Bug {{ note.bug }}</a></span>
      {%- endif %}
      {% if note.progressive_rollout and note.relevant_countries %}
      <div class="relevant-countries">
        Currently available in:
        {% for data in note.relevant_countries %}
            {{data.name}}{% if not loop.last %}, {% endif %}
        {% endfor %}
      </div>{% endif %}
    </div>
    {% if note.progressive_rollout %}
    <div class="release-note-progressive-rollout-indicator">
      <img loading="lazy" src="{{ static('img/firefox/releasenotes/progressive.svg') }}" alt="">
      <p>This feature is part of a progressive roll out.</p>
      <details>
        <summary>What is a progressive roll out?</summary>
        <p>Certain new Firefox features are released gradually. This means some users will see the feature before everyone does. This approach helps to get early feedback to catch bugs and improve behavior quickly, meaning more Firefox users overall have a better experience.</p>
      </details>
    </div>
    {% endif %}
  </li>
{% endmacro %}

{% block js %}
  {% if switch('release-notes-newsletter-banner', ['en']) %}
    {{ js_bundle('firefox-newsletter-banner') }}
  {% endif %}
{% endblock %}
